<template>
    <h1>会员等级显示</h1>
    会员等级：
    <input type="text" v-model="query.LevelName">
    权益：
    <select v-model="query.RightId">
        <option value="0">请选择</option>
        <option value="1">免费早餐</option>
        <option value="2">免费停车</option>
        <option value="3">六九折</option>
    </select>
    <input type="button" value="查询" @click="Cha">
    <a href="/AddMemberView">添加会员信息</a>
    <div>
        <table border="1">
            <thead>
                <tr>
                    <th>会员等级名称</th>
                    <th>等级状态</th>
                    <th>权益</th>
                    <th>权益个数</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="h in data">
                    <th>{{ h.LevelName }}</th>
                    <th>{{ h.LevelState?"启用":"禁用" }}</th>
                    <th>{{ h.RightName }}</th>
                    <th>{{ h.RightId }}</th>
                    <th>
                        <input type="button" :value="h.LevelState?'禁用':'启用'" @click="UpdateState(h.LevelId)">
                    </th>
                    <th>
                        <input type="button" v-if="!h.LevelState"  value="分配权益" @click="QY(h.RightId)">
                    </th>
                </tr>
            </tbody>
        </table>
        一共 {{ querydata.count }}  条
        当前第 {{ query.PageIndex }}  页
        一共 {{ querydata.pagecount }} 页
        一页 {{ query.PageSize }} 条
        <input type="button" v-for="d in querydata.pagecount" :value="d" @click="An(d)">
        <input type="button" value="首页" @click="Fen(1)">
        <input type="button" value="上一页" @click="Fen(2)">
        <input type="button" value="下一页" @click="Fen(3)">
        <input type="button" value="尾页" @click="Fen(4)">
        一页
        <input type="number" v-model="query.PageSize" @click="Tiao">
        条
        跳转：
        <input type="number" v-model="num">
        <input type="button" value="跳转" @click="ZHUAN(num)">
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { onMounted } from 'vue';
import type { RefSymbol } from '@vue/reactivity';

const rou=useRouter();

const QY=(val:any)=>{
    rou.push({path:'/FPQYView',query:{RightId:val}})
}



let num=0;

const ZHUAN=(val:any)=>{
    if(val>0 && val<=querydata.value.pagecount){
        query.value.PageIndex=val;
        Show();
    }
}



const Tiao=()=>{
    Show();
}


const An=(d:any)=>{
    query.value.PageIndex=d;
    Show();
}

const Fen=(val:any)=>{
    if(val==1){
        query.value.PageIndex=1;
        Show();
    }
    if(val==2){
        if(query.value.PageIndex>1){
            query.value.PageIndex-=1;
            Show();
        }
    }
    if(val==3){
        if(query.value.PageIndex<querydata.value.pagecount){
            query.value.PageIndex+=1;
            Show();
        }
    }
    if(val==4){
        query.value.PageIndex=querydata.value.pagecount;
        Show();
    }
}



const Cha=()=>{
    query.value.PageIndex=1;
    Show();
}


const data=ref([{
    "LevelId": 0,
  "LevelName": "",
  "LevelState": true,
  "RightName": "",
  "RightId": 0,
  "LevelDelete": true
}])


onMounted(()=>{
    Show();
})

const query=ref({
    LevelName:"",
    RightId:"",
    PageIndex:1,
    PageSize:3
})

const querydata=ref({
    count:0,
    pagecount:0
})


const Show=()=>{
    axios.get("https://localhost:7147/api/Member/GetLevel",{params:query.value}).then(res=>{
        data.value=res.data.list;
        querydata.value.count=res.data.count;
        querydata.value.pagecount=Math.ceil(querydata.value.count/query.value.PageSize);
    })
}



const UpdateState=(val:any)=>{
    axios.get("https://localhost:7147/api/Member/UpdateLevelState",{params:{LevelId:val}}).then(res=>{
        if(res.data>0){
            alert('修改状态成功')
            Show();
        }
        else{
            alert('失败')
        }
    })
}




</script>

